@mixin mobile {
  @media (max-width: #{$mobile-width}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) and (max-width: #{$desktop-hd-width - 1px}) {
    @content;
  }
}

@mixin desktop-hd {
  @media (min-width: #{$desktop-hd-width}) {
    @content;
  }
}



@mixin jScrollPane{
  .jspVerticalBar{
    background: none;
    width: 14px;
    .jspTrack{
      background: url(../images/scroll-bg.png) repeat-y;

      .jspDrag{
        background:#fff;
        width: 14px;
      }
    }
  }
}

@mixin jScrollPaneRed{
  .jspVerticalBar{
    background: none;
    width: 10px;
    .jspTrack{
      background: url(../images/scroll-bg-2.png) repeat-y;

      .jspDrag{
        background:#bd4b3e;
        width: 10px;
      }
    }
  }
}

%h-title{
  padding:24px 0;
  background:#e5e5e5;
  text-align:center;
}

%ul-nav{
  text-align:center;
  background:#f2f2f2;
  li{
    display:inline-block;
    margin:0 40px;
    @include mobile {
      margin:0 20px;
    }
    a{
      color:#000;
      text-decoration: none;
      line-height:58px;
      font-size:14px;
      &:hover{
        color:#bd4b3e;
      }
    }
  }
}

%sub-title{
  text-align: center;
  font-size:22px;
  line-height:100px;
  color:#000;
  border-bottom:1px solid #b2b2b2;
  span{
    font-size:22px;
  }
}


%zp-head{
  .zp-head{
    height: 349px;
  }

  .heng-zuopin{
    @extend %h-title;
  }

  .sub-nav{
    ul{
      @extend %ul-nav;
    }
  }

  .sub-title{
    @extend %sub-title;
  }

}